[warn] --jsx-bracket-same-line is deprecated.
<template>
  <base-content>
    <template>
      <sf-base-search ref="baseSearchEle" :base-searchs="baseSearchs" :all-searchs="allSearchs" :base-handles="baseHandles" :base-data="baseFormData" />
      <sf-grid
        ref="grid"
        :columns="columns"
        :operations="operations"
        :store-config="configs"
      />
      <el-dialog title="修改推广码" :visible.sync="isShow" width="30%">
        <sf-base-form ref="mybaseForm" :eles="eles" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="handleChangeCode">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </base-content>
</template>

<script>
import { queryParams, hasPermission } from '@/utils'
import { mapGetters } from 'vuex'
import { fetchUserList, fetchChangeCode } from '@/api/user'

export default {
  computed: {
    ...mapGetters(['sidebar']),
    routes() {
      return this.$router.options.routes
    }
  },
  data() {
    return {
      // here is dialog
      isShow: false,
      product_name: '',
      // 修改推广码
      eles: [
        {
          label: '用户id',
          elType: 'input',
          placeholder: '',
          value: '',
          readonly: true,
          name: 'id'
        },
        {
          label: '原推广码',
          elType: 'input',
          placeholder: '请输入自己的推广码',
          readonly: true,
          value: '',
          name: 'old_promotion_code'
        },
        {
          label: '新推广码',
          elType: 'input',
          placeholder: '请输入自己的推广码',
          value: '',
          name: 'promotion_code'
        }
      ],
      baseSearchs: [
        {
          label: '手机号',
          elType: 'input',
          placeholder: '请输入用户手机号',
          value: '',
          name: 'phone'
        },
        {
          label: '推广码',
          elType: 'input',
          placeholder: '请输入推广码',
          value: '',
          name: 'promotion_code'
        },
        {
          label: '注册时间',
          elType: 'date-time-range',
          width: '450px',
          placeholder: '请输入',
          value: '',
          name: 'registerTime'
        },
        {
          label: '账号类型',
          elType: 'select',
          placeholder: '请请择单位名称',
          value: '',
          name: 'account_type_id',
          options: [
            {
              label: '平台管理员',
              value: 1
            },
            {
              label: '运营中心',
              value: 2
            },
            {
              label: '咨询中心',
              value: 3
            },
            {
              label: '机构',
              value: 4
            },
            {
              label: '门店',
              value: 5
            }
          ]
        }
      ],
      baseHandles: [
        {
          btnType: 'primary',
          text: '查询',
          key: 'search',
          handle: this.handleBaseSearch
        },
        {
          btnType: 'default',
          text: '重置',
          key: 'reset',
          handle: this.handleBaseSearch
        }
      ],
      baseFormData: {},
      formData: {},
      allSearchs: [],
      // here is table
      columns: [
        {
          title: '用户id',
          props: 'id'
        },
        {
          title: '用户手机号',
          props: 'phone'
        },
        {
          title: '注册时间',
          props: 'insert_time'
        },
        {
          title: '微信昵称',
          props: 'wechat_nick_name'
        },
        {
          title: '自己的推广码',
          props: 'promotion_code'
        },
        {
          title: '总积分',
          props: 'total_score'
        },
        {
          title: '可提现积分',
          props: 'normal_score'
        },
        {
          title: '冻结积分',
          props: 'freeze_score'
        },
        {
          title: '位置',
          formatter(val) {
            const { province, city } = val
            return province + '/' + city
          }
        },
        {
          title: '所属单位',
          props: 'platform'
        }
      ],
      operations: [
        {
          label: '修改自己的推广码',
          hide: true,
          handler: (row) => {
            this.isShow = true
            this.$nextTick(() => {
              const { id, promotion_code } = row
              this.$refs.mybaseForm.setVal({
                id,
                old_promotion_code: promotion_code,
                promotion_code: ''
              })
            })
          }
        }
      ],
      configs: {
        loadDataApi: (p) => {
          return new Promise((resolve) => {
            fetchUserList(queryParams(p, this.formData)).then((res) => {
              resolve(res)
            })
          })
        },
        fetchListData: function (res) {
          return res.data
        },
        fetchTotal: function (res) {
          return res.meta.count
        },
        generateQueryParams: (pagination) => {
          const { pageIndex, pageSize } = pagination
          return {
            page_size: pageSize,
            page_num: pageIndex
          }
        }
      }
    }
  },
  mounted() {
    const isHidden = !hasPermission('用户管理')
    if (isHidden) {
      this.operations = []
    }
  },
  methods: {
    // val: 当前表单中的数据
    // key 用来handles 中设置的唯一标识key值
    handleBaseSearch(val, key) {
      const { registerTime = [], account_type_id, phone, promotion_code } = val
      this.formData = {
        register_start_time: registerTime[0],
        register_end_time: registerTime[1],
        account_type_id,
        phone,
        promotion_code
      }
      if (key === 'search') {
        this.$refs.grid.query()
      } else {
        const formEle = this.$refs.baseSearchEle
        formEle.empty()
        this.$refs.grid.query()
      }
    },
    handleChangeCode() {
      const data = this.$refs.mybaseForm.getVal()
      fetchChangeCode(data).then((res) => {
        if (res.code === '0') {
          this.$message.success('修改成功')
        } else {
          this.$message.error(`修改失败：${res.msg}`)
        }
        this.$refs.mybaseForm.getVal()
        this.isShow = false
        this.$refs.grid.query()
      })
    }
  }
}
</script>
